<template>
  <header id='head_top'>
    <section
      class="head_goback"
      v-if="goBack"
      @click="onBack"
    >
      <svg
        width="100%"
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
      >
        <polyline
          points="12,18 4,9 12,0"
          style="fill:none;stroke:rgb(0,0,0);stroke-width:2"
        />
      </svg>
    </section>
    <section class="head-right">
      <slot name="right"></slot>
    </section>
    <section
      class="head-title ellipsis"
      v-if="headTitle"
    >
      <span class="title_text">{{headTitle}}</span>
    </section>
  </header>
</template>
<script>
export default {
  props: {
    headTitle: {
      type: String,
      defalut: ''
    },
    goBack: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onBack() {
      window.history.length <= 1
        ? this.$router.push({ path: '/' })
        : this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
#head_top {
  background-color: #f5f5f5;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 88px;
  overflow: hidden;
}
.head_goback {
  width: 150px;
  margin-left: 0.4rem;
  margin-top: 26px;
}
.head-right {
  right: 0.55rem;
  @include sc(30px, #151515);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  a {
    color: #151515;
  }
}
.head-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  color: #151515;
  text-align: center;
  .title_text {
    @include sc(34px, #151515);
    text-align: center;
  }
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
